<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy-of-Navbar</title>
    <link rel="stylesheet" href="style.css">

    <!-- 将<i>标签变成应用图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <nav class="navbar">
        <div class="navbar-link prevElChange"></div>
        <a href="#" class="navbar-link change"><i class="fas fa-home"></i></a>
        <a href="#" class="navbar-link nextElChange"><i class="fas fa-camera"></i></a>
        <a href="#" class="navbar-link"><i class="fas fa-calendar-alt"></i></a>
        <a href="#" class="navbar-link"><i class="fas fa-compass"></i></a>
        <a href="#" class="navbar-link"><i class="fas fa-book"></i></a>
        <a href="#" class="navbar-link"><i class="fas fa-camera-retro"></i></a>
        <a href="#" class="navbar-link"><i class="fas fa-headphones"></i></a>
        <div class="navbar-link"></div>
    </nav>
    <script src="script.js"></script>
</body>
</html>